<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/resources/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/daterangepicker-bs3.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/colorbox.css"/>
    <style type="text/css">
        body {
            background-color: #EEEEEE;
            padding-bottom: 40px;
            padding-top: 40px;
        }

        body {
            padding-top: 70px;
        }
        .alert {
            background-color: #FCF8E3;
            border: 1px solid #FBEED5;
            border-radius: 4px;
            margin-bottom: 20px;
            padding: 8px 35px 8px 14px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
<div class="bs-example bs-navbar-top-example">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button data-target="#bs-example-navbar-collapse-6" data-toggle="collapse" class="navbar-toggle"
                    type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="http://6ks.com" class="navbar-brand">首页 | 6ks.com</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-6" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">SKU信息</a></li>
                <li><a href="#">预留菜单</a></li>
                <li><a href="#">预留菜单</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</div>
<div class="container">
    <c:if test="${error != null}">
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>注意!</strong> ${error}
    </div>
    </c:if>
    <div class="row" style="margin-left: 0px;margin-bottom:10px;">

        <form class="form-inline" role="form" method="post" action="/sku">
            <div class="form-group">
                <label class="sr-only" for="dateRange">日期范围:</label>
                <input type="text" class="form-control" id="dateRange" name="dateRange" placeholder="日期范围" value="${dateRange}" style="width: 190px;">
            </div>
            <div class="form-group">
                <label class="sr-only" for="productId">商品ID:</label>
                <input type="text" class="form-control" id="productId" name="productId" placeholder="商品ID(可选)">
            </div>
            <button type="submit" class="btn btn-default">查询</button>
        </form>

    </div>
    <c:choose>
        <c:when test="${fn:length(dates) == 0}">
            <table class="table table-hover table-bordered">
                <thead>
                <tr style="text-align: center;">
                    <th>请选择查询条件</th>
                </tr>
                </thead>
            </table>
        </c:when>
        <c:otherwise>
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>商品ID</th>
                    <c:forEach items="${dates}" var="d">
                        <th><fmt:formatDate value="${d}" pattern="yyyy-MM-dd"/></th>
                    </c:forEach>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${hmap}" var="his" varStatus="index">
                    <c:choose>
                        <c:when test="${index.count % 2 == '0'}">
                            <tr class="active">
                        </c:when>
                        <c:otherwise>
                            <tr class="success">
                        </c:otherwise>
                    </c:choose>

                    <td>${his.key}</td>
                    <c:forEach items="${his.value.histories}" var="hh">
                        <td>
                            <a href="http://www.6ks.com/${hh.value.urlOfImage}" style=" text-decoration: none;color: blue;" class="group2">
                            <c:if test="${fn:length(hh.value.sSize) != 0}">
                                ${fn:length(hh.value.sSize)}&nbsp;<span style="width: 10px;" class="label label-primary">S</span>&nbsp;
                            </c:if>
                            <c:if test="${fn:length(hh.value.mSize) != 0}">
                                ${fn:length(hh.value.mSize)}&nbsp;<span style="width: 10px;" class="label label-success">M</span>&nbsp;
                            </c:if>
                            <c:if test="${fn:length(hh.value.lSize) != 0}">
                                ${fn:length(hh.value.lSize)}&nbsp;<span style="width: 10px;" class="label label-info">L</span>&nbsp;
                            </c:if>
                            <c:if test="${fn:length(hh.value.oSize) != 0}">
                                ${fn:length(hh.value.oSize)}&nbsp;<span style="width: 10px;" class="label label-warning">O</span>
                            </c:if>
                            </a>
                        </td>
                    </c:forEach>
                    <c:forEach var="i" begin="1" end="${fn:length(dates) - fn:length(his.value.histories)}" step="1">
                        <td></td>
                    </c:forEach>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </c:otherwise>
    </c:choose>

    <%--<div class="bs-example" style="">--%>
    <%--<ul class="pager">--%>
    <%--<li><a href="#">Previous</a></li>--%>
    <%--<li><a href="#">Next</a></li>--%>
    <%--</ul>--%>
    <%--</div>--%>

</div>
</body>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="/resources/js/jquery.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/js/moment.min.js"></script>
<script type="text/javascript" src="/resources/js/daterangepicker.js"></script>
<script type="text/javascript" src="/resources/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#dateRange').daterangepicker({format: 'YYYY/MM/DD'});
        $(".group2").colorbox({rel:'group2',  transition:"none", width:"75%", height:"75%"});
    });
</script>
</html>